<template>
	<view>
		<view>
			<view>
				<view class="header"><image src="../../../static/img/log.png"></image></view>
				<view class="content">
					<view style="color: #333333;">申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>
				<view v-if="openid == null || openid == ''">
					<button class="bottom" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo" :style="{ background: newColor.color }">
						授权登录
					</button>
				</view>
				<view v-else><button class="bottom" disabled>已授权</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import { getRecommend, setToken, getUserInfo } from '@/static/utils/ahth.js';
export default {
	data() {
		return {
			codes: '',
			userinfo: getUserInfo(),
			openid: '',
			nickName:'',
			avatarUrl:''
		};
	},
	onLoad() {
		this.getUserData();
	},
	methods: {
		wxGetUserInfo() {
			//微信授权
			let _this = this;
			uni.getUserInfo({
				provider: 'weixin',
				success: function(infoRes) {
					_this.nickName = infoRes.userInfo.nickName; //昵称
					_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
					try {
						uni.setStorageSync('isCanUse', 1); //记录是否第一次授权  false:表示不是第一次授权
					} catch (e) {
						console.log('缓存失败');
					}
					console.log(infoRes);
					_this.wxLogin();
				},
				fail(res) {}
			});
		},
		login() {
			let _this = this;
			// uni.showLoading({
			// 	title: '登录中...'
			// });
			// 1.wx获取登录用户code
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log('这是用户的code', loginRes);
					let code = loginRes.code;
					_this.codes = code
					if (_this.isCanUse == 1) {
						//非第一次授权获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								//获取用户信息后向调用信息更新方法
								_this.nickName = infoRes.userInfo.nickName; //昵称
								_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
							}
						});
					}
				}
			});
		},
		wxLogin() {
			this.request('user/wxLogin', {
				code: this.codes
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					//用户未注册
					this.openid = res.data.openid;
					this.getUserInfos();
				}
			});
		},
		getUserInfos() {
			this.request('user/getToken', {
				pid: getRecommend() || '',
				user_id: this.userinfo.user_id,
				open_id: this.openid || '',
				username: this.nickName,
				head_img: this.avatarUrl
			}).then(res => {
				console.log(res);
				setToken(res.data.token);
				uni.hideLoading();
				uni.showToast({
					title: '绑定成功'
				});
				setTimeout(() => {
					this.$Router.pushTab({ path: '/pages/tabBar/user/user' });
				}, 1500);
			});
		},
		getUserData() {
			//获取个人信息
			this.request('user/getUserInfo', {}).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.userinfo = res.data;
					this.openid = res.data.open_id;
				} else if (res.code == 400) {
					this.openid = '';
					removeToken();
				}
			});
		}
	},
	onShow() {
		this.login();
	}
};
</script>

<style lang="scss" scoped>
.header {
	margin: 90rpx 0 90rpx 50rpx;
	border-bottom: 1px solid #ccc;
	text-align: center;
	width: 650rpx;
	height: 300rpx;
	line-height: 450rpx;
	overflow: hidden;
}

.header image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	box-shadow: 5upx 2upx 12upx #cccccc;
}

.content {
	margin-left: 50rpx;
	margin-bottom: 90rpx;
}

.content text {
	display: block;
	color: #9d9d9d;
	margin-top: 40rpx;
	font-size: 24upx;
}

.bottom {
	border-radius: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: 70rpx 50rpx;
	font-size: 35rpx;
	color: #ffffff;
	width: 70vw;
	margin: 0 auto;
	border: none;
	background-color: #f23a3a;
	&::after {
		content: none;
	}
}
</style>
